<div layout="row" layout-wrap>
    <div flex="100">
        <md-card>
            <md-card-header>
                <md-card-header-text>
                    <span class="md-title">{{ paymentTypeName(paymentType) }}</span>
                </md-card-header-text>
            </md-card-header>
            <md-card-content>
                <md-divider></md-divider>
                <md-list layout="row">
                    <div flex-xs="5" flex-sm="10" flex-gt-sm="20"></div>
                    <div flex>
                        <form name="settingForm" layout="row" layout-wrap>
                            <md-input-container class="md-block" flex="45">
                                <label>支付宝</label>
                                <input type="number" required name="alipay" ng-model="paymentData.alipay">
                            </md-input-container>
                            <div flex="10"></div>
                            <md-input-container class="md-block" flex="45">
                                <label>Paypal</label>
                                <input type="number" required name="paypal" ng-model="paymentData.paypal">
                            </md-input-container>
                            <md-input-container class="md-block" flex="100">
                                <label>流量（MB）</label>
                                <input type="number" required name="flow" ng-model="paymentData.flow">
                            </md-input-container>
                            <md-input-container class="md-block" flex="100">
                                <label>订单名称</label>
                                <input type="text" required name="orderName" ng-model="paymentData.orderName">
                            </md-input-container>
                            <md-input-container class="md-block" flex="100">
                                <label>邀请获得时长</label>
                                <input type="text" required name="refTime" ng-model="paymentData.refTime" placeholder="1d2h3m">
                            </md-input-container>
                        </form>
                    </div>
                    <div flex-xs="5" flex-sm="10" flex-gt-sm="20"></div>
                </md-list>
                <md-divider></md-divider>
                <md-list>
                    <md-list-item>
                        <div class="md-list-item-text" style="width: 100%;" layout="row" layout-align="space-between center">
                            <div flex="75" translate>到期自动删除</div>
                            <div flex layout="row" layout-align="end center">
                                <md-switch ng-model="paymentData.autoRemove" aria-label="autoRemove"></md-switch>
                            </div>
                        </div>
                    </md-list-item>
                </md-list>
                <md-divider></md-divider>
                <md-list>
                    <md-list-item>
                        <div class="md-list-item-text" style="width: 100%;" layout="row" layout-align="space-between center">
                            <div flex="75" translate>合并多服务器流量统计</div>
                            <div flex layout="row" layout-align="end center">
                                <md-switch ng-model="paymentData.multiServerFlow" aria-label="multiServerFlow"></md-switch>
                            </div>
                        </div>
                    </md-list-item>
                </md-list>
                <md-divider></md-divider>
                <md-list>
                    <md-list-item>
                        <div class="md-list-item-text" style="width: 100%;" layout="row" layout-align="space-between center">
                            <div flex="75" translate>自定义可用服务器</div>
                            <div flex layout="row" layout-align="end center">
                                <md-switch ng-model="setServerForPayment" aria-label="server"></md-switch>
                            </div>
                        </div>
                    </md-list-item>
                    <md-list-item ng-show="setServerForPayment">
                        <div layout="column" layout-wrap flex>
                            <div layout="column" layout-wrap flex ng-repeat="server in servers">
                                <div flex="100">
                                    <md-checkbox ng-model="accountServerObj[server.id]">
                                        <div layout="row" layout-align="space-between center">
                                            <span flex>{{ server.name }}</span>
                                            <span flex style="color: #777">{{ server.host }}</span>
                                        </div>
                                    </md-checkbox>
                                </div>
                            </div>
                        </div>
                    </md-list-item>
                </md-list>
                <md-divider></md-divider>
            </md-card-content>
        </md-card>
    </div>
</div>